<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      :action="url"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :auto-upload="false"
      :on-success="successUpload"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="success"
        @click="submitUpload"
        >上传到服务器</el-button
      >
    </el-upload>
  </div>
</template>

<script>
// import { url } from 'inspector';
import base from "@/api/base";

export default {
  data() {
    return {
      url: base.uploadUrl, // 上传地址
      fileList: [], // 上传文件列表
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    // 上传成功
    successUpload(response, file, fileList) {
      // 限制上传大小
      if (file.size > 1024 * 1024 * 2) {
        this.$message.error("上传文件大小不能超过 2MB!");
        return false;
      }
      console.log("上传成功", response);
      console.log(file);
      console.log(fileList);
      // 上传成功提示
      this.$message({
        message: "上传成功",
        type: "success",
      });
      // 把成功的数据接口 传递父组件
      let imgUrl=base.host+response.url.split('\\')[1]
      // console.log(imgUrl);
      this.$emit("sendImg", imgUrl);
    },
    
  },
};
</script>

<style lang="scss" scoped></style>
